<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<head>

    <title>地图现势资料管理系统</title>
    <link th:href="@{/_files/global.css}" rel="stylesheet"/>
    <link th:href="@{/_files/style.css}" rel="stylesheet"/>
    <link th:href="@{/_files/mystyle.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/select/select2.css}" rel="stylesheet"/>
    <link th:href="@{/css/naranja.min.css}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <script th:src="@{/_files/html5.js}"></script><![endif]-->
    <script th:src="@{/_files/common.js}"></script>
    <script th:src="@{/_files/jquery.js}"></script>
    <script th:src="@{/_files/layer/layer.js}"></script>
    <script th:src="@{/_files/handlebars-v4.1.2.js}"></script>
    <script th:src="@{/_files/front.js}"></script>
    <script th:src="@{/js/jqPaginator.js}"></script>


    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/jqPaginator.js}"></script>
    <script th:src="@{/ajax/libs/select/select2.js}"></script>

    <link th:href="@{/jquerypage/css/zxf_page.css}" rel="stylesheet">
    <script th:src="@{/jquerypage/js/zxf_page.js}"></script>
    <script th:src="@{/js/vector.js}"></script>


    <style>
        a.ap {
            color: #005aa0;
            text-decoration: none
        }

        a.ap:hover {
            color: #e4393c;
        }

        a.ap-curr {
            background-color: #e4393c;
            color: #fff;
            text-decoration: none;
        }

        a.sort {
            background-color: #fff;
            color: #333;
            border: 1px solid #ccc;
            text-decoration: none;
        }

        a.sort:hover {
            color: #e4393c;
            border: 1px solid #e4393c;
        }

        a.sort-curr {
            background-color: #e4393c;
            color: #fff;
            border: 1px solid #e4393c;
            text-decoration: none
        }

        .search {
            float: right;
            margin-right: 10px;
        }

        #search {
            width: 45px;
            text-align: center;
            display: inline-block;
            line-height: 26px;
            color: #fff;
            height: 26px;
            background: #e4393c;
            font-size: 14px;
            font-weight: normal;
            text-decoration: none;
        }

        .search-input {
            height: 34px;
        }

        #search-input {
            width: 200px;
        }

        .row span {
            display: block;
        }

        .row b {
            font-weight: normal;
            color: #666;
        }

        .content {
            width: 96%;
            overflow: hidden;
            padding-left: 2%;
            padding-right: 2%;
        }

        .c-container a {
            font-style: normal !important;
            font-family: normal;
            text-decoration: none;
        }

        .c-container .time {
            display: block;
            float: right;
            color: #888;
        }

        .c-container .rows span {
            display: block;
        }

        .c-container .title a {
            font-size: 16px;
        }

        .c-container .fast-cut a {
            color: #e4393c;
        }

        .c-container .text {
            text-indent: 2em;
            padding: 4px 0px;
        }

        .item:hover, .fs1:hover, .nava:hover {
            background-color: #09448c !important;
        }

        .tag-div {
            position: absolute;
            left: 0px;
            width: 400px;
            top: 5px;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: solid #ddd 1px;
            outline: 0;
        }

        select2-container--default .select2-selection--multiple {
            border: 1px solid #ddd;
        }


        /*新增*/
        .search-input{
            border-radius: 4px 0 0 4px;
        }
        .ws{
            width: 100% !important;
            background: #09448c;
        }
        .w-main {
            width: 970px;
        }
        .center1 {
            margin-right: auto;
            margin-left: auto;
        }
        .listyle{
            min-width: 20%;
            text-align: center;
            color: #fff!important;
        }
        .listyle a::after {
            content: '';
            display: block;
            position: absolute;
            width: 2px;
            height: 20px;
            right: -1px;
            top: 15px;
            left: auto;
            bottom: auto;
            background: #fff;
        }
        .listyle a:hover{
            color: #ffff00!important;
        }
        .listyle:last-child a::after{
            background: transparent;
        }
        .nav .first {
            border-right: 0px solid #355C90;
        }
        .listyle a{
            font-size: 18px;
            color: #fff !important;
            font-weight: normal!important;
        }
        .listyle:nth-child(3) a{
            font-weight: bold !important;
        }
       .count .nums{
            color: #46b1ff;
            font-weight: bold;
        }
        .centop{
            padding: 13px 0;
        }
        a.ap-curr{
            background-color: #46b1ff;
            color: #ffffff;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        #search{
            line-height: 30px;
            /*padding: 7px 15px;*/
            height: 30px;
            width: 56px;
            margin-left: -5px;
            vertical-align: middle;
            -webkit-border-radius: 0 4px 4px 0;
            -moz-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
            background-color: #46b1ff;
        }
        #search-input{
            vertical-align: middle;
            -webkit-border-radius: 4px 0 0 4px;
            -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
            border: 1px solid #dcdfe6;
        }
        .centerbot{
            text-align: center;
        }
        .pagination>.active>a{
            background-color:#46b1ff;
            border: 1px solid #ddd;
        }
        .c-container .title a {
            font-size: 18px;
        }
        .c-container .rows span {
            font-size: 16px;
        }

        .minheight{
            height: 600px;
        }
        .w{
            width: 1170px!important;
        }
        .w{
            width: 1170px!important;
            background: #fff;
        }
        .bg{
            background-color: #f2f2f2;
        }
        .pt20{
            padding-top: 20px;
        }
        .pb20{
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<!-- LOGO开始 -->
<div class="w center centop" style="background-color:#0a8cd2;width:100%!important;">
    <div id="top-header" class="left" style="width:60%;">
        <a class="right block"
           style="width:100%;height:90px;background:url(../../../_files/img/logo.png) no-repeat ;background-size: 400px 160px;background-position:left center"
           href="/front"></a>
        <div class="clear"></div>
    </div>
    <div id="top-search" class="right" style="width:40%;">
        <form th:action="@{/front/search}" method="get" style="margin:28px 0 0 20px;float: right;">
            <input type="text" name="deptId" th:value="${curr_child.deptId}" hidden>
            <input type="text" name="keyWords" value="" class="left search-input" style="width:280px;"
                   autocomplete="off"/>
            <button type="submit" class="left"
                    style="width:86px;height:34px;background:#09448c ;color:#fff;border:0;font-size: 14px;border-radius: 0 4px 4px 0;letter-spacing: 1px;">搜索
            </button>
            <div class="clear"></div>
        </form>
    </div>
    <div class="clear"></div>
</div>
<div class=" center ws">
    <ul class="list-unstyled nav w-main center1"
        style="height:52px;line-height:52px;/*background:url(_files/img/nav_bg.png)*/background:#09448c ">
        <li class="left listyle" th:each="node,iterStat:${nodes}">
            <a th:href="@{/front(deptId=${node.deptId},level=1)}"
               th:class="${node.curr}? 'nava fs14 item first curr' : 'nava fs14 item'"
               th:text="${node.deptName}">首页</a>
        </li>

    </ul>
    <div class="clear"></div>
</div>
<div class="bg pt20 pb20">
    <div class="w center">
        <div class="" style="border-left: 1px solid  #ddd;border-right: 1px solid  #ddd;">
            <div class="fs14 c-666"
                 style="font-size:14px;font-weight:700;line-height:36px;padding-left:10px;border-bottom:1px solid #ddd;border-top:1px solid #ddd;">
                资源筛选<span style="margin-left:20px;font-size:12px;font-weight:normal;" class="count"></span>
            </div>

            <div style="padding:0 0 8px 10px;">
                <div class="left c-666 fs12" style="width:100px;padding-top:10px;">类别：</div>
                <div class="left fs12" style="width:880px;">
                    <a th:href="@{/front(deptId=${curr.parentId},level=1)}"
                       th:class="${!curr_child.curr}? 'ap-curr'"
                       style="margin-right:15px;display:inline-block;line-height:23px;padding:0 10px;margin-top:8px;">全部</a>

                    <span th:each="node,iterStat:${childs}">
                <a th:href="@{/front(deptId=${node.deptId},level=2)}"
                   th:class="${node.curr}? 'ap-curr'"
                   style="display:inline-block;line-height:23px;padding:0 10px;margin-top:8px;"
                   th:text="${node.deptName}">
                </a>
                </span>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class=""
             style="padding:0px 10px;border:1px solid #ddd;position: relative ">
        </div>
        <div class="content">
        </div>

        <div class="center mt20 centerbot" style="text-align: center">
            <ul class="pagination" id="pagination1"></ul>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="w center text-center c-666" style="padding:20px;line-height:30px;">
    <div class="copyright">
        <span>山东省地图院 版权所有</span>
        <span><a href="/" class="c-infoem" target="_blank">登录后台</a></span>
    </div>
</div>
<!--<div id="container"><div id="output"></div></div>-->

<script type="text/template" id="myTemplate">
    {{#each rows}}
    <div class="c-container">
        <h3 class="title">
            <a href="/system/zhengqu/infoFront/{{zqId}}" target="_blank">{{zqTitle}}</a>
        </h3>
        <div class="rows">
            <span><b>分类：</b>{{class1}} - {{class2}} - {{class3}}</span>
        </div>
        <div>

            <div class="img-div" style="width: 100px;height: 100px;overflow: hidden;float: left;margin: 10px">
                <a target="_blank" href="/out/cmsInfoDetail/capture/{{fInfoId}}"><img class="frontPic"
                                                                                      src="{{frontPic}}"
                                                                                      style="width: 100px"></a>
            </div>

            <div>
                <span class="text">{{{getSimpleText zqDetails}}}</span>
                <span class="time">创建时间：{{createTime}}</span>
            </div>
        </div>

    </div>
    {{/each}}
</script>

<script type="text/template" id="bookTemplate">
    {{#each rows}}
    <div class="c-container">
        <h3 class="title">
            <a href="{{url}}" target="_blank">{{jtTitle}}</a>
        </h3>
        <div class="rows">
            <span><b>关键词：</b>{{keyWords}}</span>
        </div>

        <div>
            <span class="text">{{{getSimpleText bookInfo}}}</span>
            <span class="time">创建时间：{{createTime}}</span>
        </div>

        <div class="fast-cut">
            {{{fastCapture fFile}}}
        </div>
    </div>
    {{/each}}
</script>
<script type="text/javascript" th:src="@{/js/naranja.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var ctx = [[@{
        /}]];

        var page = ctx + 'front';
        var list = ctx + 'front/list';
        var parentId = [[${curr.parentId}]];
        var deptId = [[${curr_child.deptId}]];
        var title = [[${title}]];
        var tags = '';
        var pageNum = 1;

        $('#search-input').val(title);

        var first = true;
        $(function () {
            getList(1, $('#search-input').val());
            // initSelect();
        })
        ;

        $('#search').click(function () {
            title = $('#search-input').val();
            tags = $('#tags').val();
            var url = page;
            if ([[${curr_child.curr}]]) {
                url = url + '?deptId=' + deptId + '&level=2';
            } else {
                url = url + '?deptId=' + parentId + '&level=1';
            }

            if (title) {
                url += '&title=' + title;
            }

            if (tags) {
                url += '&tags=' + tags;
            }


            // window.location.href = url;
            first = true;
            getList(1, title, tags);
        });

        /*$('#search-input').live('input propertychange', function () {
            if (!$(this).val()) {
                $('#search').click();
            }
        });*/

        function fillBook(data) {

            var tpl = $("#bookTemplate").html();
            var template = Handlebars.compile(tpl);
            var html = template(data);
            $('.content').html(html);

        }

        function fillInfo(data) {
            console.log('fill info!')

            var tpl = $("#myTemplate").html();
            var template = Handlebars.compile(tpl);
            var html = template(data);

            $('.content').html(html);

            $('.frontPic').each(function (i, e) {
                if (!$(this).attr('src')) {
                    $(this).parents('.img-div').remove()
                }
            });

        }

        function getList(pageNum, search, tags) {
            $.ajax({
                url: list,
                data: {
                    orderByColumn: 'create_time',
                    isAsc: 'desc',
                    deptId: !deptId ? parentId : deptId,
                    pageNum: pageNum,
                    pageSize: 10,
                    keyWords: search,
                    tags: tags

                },
                cache: false,
                dataType: 'json',
                type: 'POST',
                success: function (result) {
                    if (result.code == 0) {
                        console.log(result)
                        if (result.dataType == 2) {
                            fillBook(result)
                        } else {
                            fillInfo(result);
                        }

                        $('.count').html('共条<span class="nums"> ' + result.total + ' </span>数据');

                        var pages = parseInt(result.total / 10) + 1;

                        if (first) {
                            first = false;
                            $("#pagination1").createPage({
                                pageNum: pages,
                                current: pageNum,
                                backfun: function (e) {
                                    console.log(e);//回调
                                    pageNum = e.current;
                                    getList(pageNum, $('#search-input').val());
                                }
                            });
                        }

                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        }

        function initSelect() {
            $.ajax({
                type: 'POST',
                url: ctx + "system/cmsInfoTags/list?has=1",
                dataType: 'json',
                data: {
                    pageSize: 1000,
                    pageNum: 1,
                    orderByColumn: 'tagId',
                    isAsc: 'desc'
                },
                success: function (data) {
                    if (data.code == 0) {
                        var str = "";
                        data.rows.forEach(function (obj, index, array) {
                            str += "<option value ='" + obj.infoIds + ',' + obj.tagId + "a'>" + obj.tag + "</option>"
                        })
                        $("#sel_menu3").html(str)
                        $("#sel_menu3").select2({
                            placeholder: "请输入标签",
                            language: "zh-CN",// 指定语言为中文，国际化才起效
                            allowClear: true,
                        });


                        $("#sel_menu3").on("change", function (e) {
                            setTags($("#sel_menu3").val());
                        })

                    }
                }
            })
        };


        function setTags(arr) {
            if (arr) {
                $('#tags').val(arr.join(','))
            } else {
                $('#tags').val('')
            }
        }
    var victor = new Victor("container", "output");

    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");

        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket("ws://localhost:8081/webSocket");
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            console.log(msg.data);
            var data = JSON.parse(msg.data);
            //发现消息进入    调后台获取
            if (data.noticeType == '审批通过') {
                narn('success', data.noticeTitle)
            }
            else if(data.noticeType == '3')
            {
                narn('success', data.noticeTitle)
            }

        };
        //关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            alert("Socket发生了错误");
        }

        //关闭连接
        function closeWebSocket() {
            socket.close();
        }

        $('.send').click(function () {
            send()
        });

        //发送消息
        function send() {
            socket.send("123-11");
        }
    }

    function narn(type, text) {
        naranja()[type]({
            title: '新消息提示',
            text: text,
            timeout: 'keep',
            buttons: [
                {
                    text: '确认',
                    click: function (e) {
                        e.closeNotification()
                    }
                }
            ]
        })
    }


</script>
</body>

</html>